<template>
	<view class="">
		<u-tabs :active-color='themeColorLight' bar-width='100' :list="tabs" :is-scroll="false" :current="current"
			@change="change"></u-tabs>
		<view v-if="current != 1">
			<Search :real='false' @search='billingproject'></Search>
			<view class="detail-list">
				<view class="left">
					<view class="item" :class="{active: active == index}" v-for="(item,index) in showItems" :key="index"
						@click="checkItem(item, index)">
						{{index}}
					</view>
				</view>
				<view class="right">
					<view class="item" v-for="(child,index) in showItems[active]" :key="index">
						<radio :checked="child.check" @click="checkRadio(child)" />
						<view class="">
							<view>{{child.CSFXMMC}}</view>
							<view class="money">
								<text>¥{{child.MJE | fixed}}</text>
								<!-- <view class="light-min-btn">注意事项</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="pay">
				<view class="">
					<text>
						合计：
					</text>
					<text class="money">
						￥{{totalMoney | fixed}}元
					</text>
					<!-- <text v-if="pkg.money !== pkg.receivableMoney" class="cross">
            ¥{{ pkg.receivableMoney }}
          </text> -->
				</view>

				<view class="btn" @click="toConfirm">
					提交
				</view>
			</view>
		</view>

		<scroll-view scroll-y v-else class="page" style="height: calc(100vh - 80upx);box-sizing: border-box;">
			<!-- refresher-enabled @refresherrestore="querybilling"> -->
			<view class="tcard" v-for="child in orders" :key="child.id" @click="toPay(child)">
				<view class="title flexR">
					<text>检测信息</text>
					<!-- <text>审核通过</text> -->
				</view>

				<view class="tform no-border">
					<view class="tform-item">
						<view class="label">申请人</view>
						<view class="value">{{userInfo.name}}</view>
					</view>
					<view class="tform-item">
						<view class="label">合计费用</view>
						<view class="value">
							<text style="color: #FF7F7F;">￥{{child.amount}}</text>
							<text>（{{payStatus[child.status]}}）</text>
						</view>
					</view>
					<view class="info-box">
						<view class="flexR" v-for="item in child.content" :key="item.id">
							<text>{{item.itemName}}</text>
							<text>¥{{item.price | fixed}}</text>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<Load :load="loading" />
		<campus @changeArea="billingproject" />
	</view>
</template>

<script>
	import {
		themeColorLight
	} from '@/static/js/theme.js'
	import Search from '@/components/Search/index.vue'
	import {
		billingproject,
		querybilling
	} from '@/api/otherService.js'
	import Load from '@/components/Load/index.vue'
	import {
		mapGetters
	} from 'vuex'
	import campus from './campus.vue'

	const payStatus = {
		'1': '待支付',
		'2': '取消',
		'3': '已支付'
	}
	export default {
		components: {
			Search,
			Load,
			campus
		},
		data() {
			return {
				payStatus,
				themeColorLight,
				loading: false,
				tabs: [{
						name: '检验'
					},
					// {name: '检查'}, 
					{
						name: '自助开单'
					}
				],
				current: 0,
				active: 0,
				showItems: [],
				orders: []
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			totalMoney() {
				let num = 0
				Object.keys(this.showItems).forEach(item => {
					this.showItems[item].forEach(ite => {
						if (ite.check) {
							num += ite.MJE
						}
					})
				})
				return num
			}
		},
		onLoad() {
			this.billingproject()
		},
		methods: {
			billingproject(CSFXMMC) {
				this.loading = true
				billingproject({
					CSFXMMC
				}).then(res => {
					const filt = res.filter(item => {
						return uni.getStorageSync('billArea') == 1 ? item.CMBMC.includes('（血）柳林') : !item
							.CMBMC.includes('（血）柳林')
					})

					this.showItems = Object.groupBy(filt, ({
						CZTMC
					}) => CZTMC)
					this.checkItem(this.showItems[Object.keys(this.showItems)[0]], Object.keys(this.showItems)[0])
				}).finally(() => {
					this.loading = false
				})
			},
			querybilling() {
				const data = {
					// idCard: '511023202011111982'
					idCard: this.userInfo.idCard
				}
				querybilling(data).then(res => {
					this.orders = res
				})
			},
			change(index) {
				this.current = index;
				if (index) {
					this.querybilling()
				} else {
					this.billingproject()
				}
			},
			checkItem(item, idx) {
				this.active = idx
			},
			checkRadio(item) {
				// item.check = !item.check
				this.$set(item, 'check', !item.check)
			},
			toConfirm() {
				let checkItems = []
				Object.keys(this.showItems).forEach(item => {
					this.showItems[item].forEach(ite => {
						if (ite.check) {
							checkItems.push(ite)
						}
					})
				})
				if (!checkItems.length) return uni.showToast({
					icon: 'error',
					title: '未勾选项目'
				})
				uni.navigateTo({
					url: `./Submit?totalMoney=${this.totalMoney.toFixed(2)}&checkItems=${JSON.stringify(checkItems)}`
				})
			},
			toPay(child) {
				if (child.status !== 1) return
				uni.navigateTo({
					url: `./cashier2?totalMoney=${child.amount}&dealcode=${child.dealcode}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-list {
		display: flex;
		flex: 1;
		// border-radius: 8px;
		overflow: hidden;
		min-height: calc(100vh - 200upx);

		.left {
			width: 174upx;
			height: calc(100vh - 300upx);
			background-color: #F6F6F6;
			overflow-y: auto;

			.item {
				line-height: 44upx;
				// border-bottom: 1px solid rgba(0,0,0,0.12);
				padding: 24upx 0 24upx 20upx;
				background-color: #F6F6F6;
				position: relative;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28upx;
				color: rgba(0, 0, 0, 0.4);
				line-height: 44upx;

				&.active {
					color: $theme-color;
					background-color: #FFF;

					&:before {
						content: '';
						display: block;
						position: absolute;
						width: 6upx;
						height: 64upx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						background: $theme-color;
						border-radius: 4upx 0 0 4upx;
					}
				}
			}
		}

		.right {
			height: calc(100vh - 300upx);
			flex: 1;
			// padding: 0 32upx 96upx;
			background-color: #FFF;
			overflow: auto;

			.item {
				display: flex;
				justify-content: flex-start;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28upx;
				color: rgba(0, 0, 0, 0.7);
				line-height: 44upx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.12);
				padding: 24upx 20upx;

				::v-deep.uni-radio-input {
					width: 32upx;
					height: 32upx;
				}

				.money {
					display: flex;
					color: #FF7F7F;
					font-size: 24upx;
					line-height: 40upx;

					.light-min-btn {
						// width: 260upx;
						height: 40upx;
						border-radius: 40upx;
						text-align: center;
						font-size: 24upx;
						background: transparent;
						border: 1px solid $theme-color;
						color: $theme-color;
						padding: 0 16upx;
						margin-left: 32upx;
					}
				}

			}
		}
	}

	.pay {
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 108upx;
		padding: 0 32upx;
		box-shadow: 0px -8px 76px 22px rgba(227, 237, 255, 0.58);
		background-color: #FFF;

		.btn {
			width: 240upx;
			height: 64upx;
			background: $theme-color;
			border-radius: 64upx;
			text-align: center;
			line-height: 64upx;
			color: #FFF;
		}

		.money {
			color: $theme-color;
			font-size: 36upx;
		}
	}

	.tcard {
		padding: 24upx;

		.title {
			justify-content: space-between;
		}

		.tform {
			.tform-item {
				padding: 12upx;
			}
		}
	}

	.info-box {
		>view {
			justify-content: space-between;
		}
	}
</style>